<script lang="ts" setup>
import { NTooltip } from 'naive-ui'
import { UserOutlined } from '@vicons/antd'

import Card from '../component/card/index.vue'
import OperateBtn from '../component/operate-btn/index.vue'
import ApproverComponent from '../approver-component/index.vue'
import ConditionComponent from '../condition-component/index.vue'
import ParallelComponent from '../parallel-component/index.vue'
import TriggerComponent from '../trigger-component/index.vue'
import EndComponent from '../end-component/index.vue'

const props = defineProps(["node"])

function getViewMessage(objType: string, objList: any[]): string {
    if (!objList) {
        return ""
    }
    let res = ""
    if (objType === "0") {
        for (let i = 0; i < objList.length; i++) {
            res = res + objList[i].userName
            if (i !== objList.length - 1) {
                res = res + "、"
            }
        }
    }
    if (objType === "1") {
        for (let i = 0; i < objList.length; i++) {
            res = res + objList[i].roleName
            if (i !== objList.length - 1) {
                res = res + "、"
            }
        }
    }
    if (objType === "2") {
        for (let i = 0; i < objList.length; i++) {
            res = res + objList[i].orgName
            if (i !== objList.length - 1) {
                res = res + "、"
            }
        }
    }
    return res
}
</script>
<template>
    <div class="flow-node">
        <card :node="props.node">
            <template #icon>
                <user-outlined />
            </template>
            <div v-if="props.node.config.approvalType === '0'"
                style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                指定人员：
                <n-tooltip trigger="hover">
                    <template #trigger>
                        {{ getViewMessage("0", props.node.config.approvalUserList) }}
                    </template>
                    {{ getViewMessage("0", props.node.config.approvalUserList) }}
                </n-tooltip>
            </div>
            <div v-if="props.node.config.approvalType === '1'"
                style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                指定角色：
                <n-tooltip trigger="hover">
                    <template #trigger>
                        {{ getViewMessage("1", props.node.config.approvalRoleList) }}
                    </template>
                    {{ getViewMessage("1", props.node.config.approvalRoleList) }}
                </n-tooltip>
            </div>
            <div v-if="props.node.config.approvalType === '2'"
                style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                指定部门：
                <n-tooltip trigger="hover">
                    <template #trigger>
                        {{ getViewMessage("2", props.node.config.approvalOrgList) }}
                    </template>
                    {{ getViewMessage("2", props.node.config.approvalOrgList) }}
                </n-tooltip>
            </div>
            <div v-if="props.node.config.approvalType === '3'"
                style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                多级领导：
                <span v-if="props.node.config.approvalEnd === -1">直至最上层领导</span>
                <span v-if="props.node.config.approvalEnd !== -1">不超过发起人的第 {{ props.node.config.approvalEnd }} 级领导</span>
            </div>
        </card>
        <div class="flow-operate">
            <operate-btn :node="props.node" />
        </div>
        <div v-for="child in props.node.children" :key="child.nodeId" class="flow-node-container">

            <approver-component v-if="child.nodeType === '1'" :node="child" />

            <condition-component v-if="child.nodeType === '2'" :node="child" />

            <parallel-component v-if="child.nodeType === '4'" :node="child" />

            <trigger-component v-if="child.nodeType === '6'" :node="child" />

            <end-component v-if="child.nodeType === '9'" :node="child" />
        </div>
    </div>
</template>
<style scoped></style>